<template>
  <div>
    <el-descriptions
        title="个人信息"
        direction="vertical"
        border
        style="margin-top: 20px"
    >
      <el-descriptions-item
          :rowspan="4"
          :width="200"
          label="头像"
          align="center"
      >
        <el-image
            style="width: 100px; height: 100px"
            :src="adminInfo.avatar"
        />
      </el-descriptions-item>
      <el-descriptions-item label="用户名" align="center">{{ adminInfo.username }}</el-descriptions-item>
      <el-descriptions-item label="手机号" align="center">{{ adminInfo.phone }}</el-descriptions-item>
      <el-descriptions-item label="性别" align="center">{{ adminInfo.gender === 0 ? "男" : "女" }}</el-descriptions-item>
      <el-descriptions-item label="姓名" align="center">{{ adminInfo.fullName }}</el-descriptions-item>
      <el-descriptions-item label="家庭住址" align="center">
        {{ adminInfo.address }}
      </el-descriptions-item>
      <el-descriptions-item label="年龄" align="center">
        {{ adminInfo.age }}
      </el-descriptions-item>
      <el-descriptions-item label="身份证号" :rowspan="3" align="center">
        {{ adminInfo.idCardNo }}
      </el-descriptions-item>
      <el-descriptions-item align="center">
        <div style="color: red;cursor:pointer;" @click="editInfo()">
          编辑
        </div>
      </el-descriptions-item>
    </el-descriptions>

    <el-dialog v-if="dialogVisible" v-model="dialogVisible" title="用户操作" width="500">
      <el-form :model="form" label-width="120px">
        <el-form-item label="头像">
          <el-image
              style="width: 100px; height: 100px"
              :src="form.avatar"
          />
          <input type="file" id="photo" @change="handleFileChange" class="file-input"
                 aria-label="上传照片"/>
          <img :src="imagePreview" class="image" aria-label="图片预览" v-if="imagePreview"
               style="max-width: 200px"/>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="form.username" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="全名">
          <el-input v-model="form.fullName" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phone" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.gender">
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="地址">
          <el-input
              v-model="form.address"
              style="width: 80%"
              type="textarea"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import {getUserInfo, updateUserInfo, uploadPic} from "@/api/user";
import {emitter} from "@/utils/eventBus";

export default {
  name: "adminInfo",
  data() {
    return {
      selectedFile: null,
      imagePreview: null,
      dialogVisible: false,
      adminInfo: {
        id: 1,
        username: '',
        fullName: '',
        phone: '',
        idCardNo: '',
        gender: '',
        age: '',
        avatar: '',
        address: ''
      },
      form: {
        id: 1,
        username: '',
        fullName: '',
        phone: '',
        idCardNo: '',
        gender: '',
        age: '',
        avatar: '',
        address: ''
      }
    };
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0]
      if (file) {
        if (!file.type.startsWith('image/')) {
          this.$message.error('请选择图片文件！')
          return
        }
        if (file.size > 50 * 1024 * 10244) {
          this.$message.error('图片文件大小不能超过50MB！')
          return;
        }
        this.selectedFile = file;
        this.imagePreview = URL.createObjectURL(file)
      }
    },
    getAdminInfo() {
      getUserInfo().then(res => {
        this.adminInfo = res.data
      })
    },
    editInfo() {
      this.form = {...this.adminInfo}; // 使表单初始化为当前用户信息
      this.dialogVisible = true;
    },
    save() {
      if (this.selectedFile) {
        uploadPic(this.selectedFile)
            .then(res => {
              // 获取上传成功后的图片 URL
              this.form.avatar = res;
              updateUserInfo(this.form).then(res => {
                this.getAdminInfo()
                emitter.emit('userUpdate', this.adminInfo.avatar)

              })
            })
      }else {
        updateUserInfo(this.form).then(res => {
          this.getAdminInfo()
          emitter.emit('userUpdate', this.adminInfo.avatar)
        })
      }
      this.dialogVisible = false;
    }
  },
  mounted() {
    this.getAdminInfo();
  }
}
</script>

<style scoped>

</style>